import React, { Component } from 'react'
import { FormInstance, message, Spin } from 'antd';
import { Form, Input, Button, Select } from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import { queryCategories } from '../../../../api/home';
import ArticleCate from '../../../../types/ArticleCate';
import { addArticle } from '../../../../api/blog';
import ArticleDisplay from '../../../../Components/ArticleDisplay';

const { Option } = Select;


interface IProps { }
interface IState {
    cates: ArticleCate[]
    isLoading: boolean
    content: string
}
export default class AddArticle extends Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);
        this.state = {
            cates: [],
            isLoading: false,
            content: ''
        }
    }

    async componentDidMount() {
        const cates = await queryCategories();  //请求所有种类
        this.setState({
            cates
        })

    }
    formRef = React.createRef<FormInstance>();  //表单引用

    onFinish = async (values: any) => {
        this.setState({ isLoading: true });
        const res = await addArticle(values.title, values.markdown, values.cateID)
        this.setState({ isLoading: false });
        if (!!res) {  //添加成功
            message.success('新增成功');
            this.formRef.current?.resetFields();
        } else {
            //添加失败
            message.error('添加失败！')
        }
    }
    onContentChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
        this.setState({ content: e.target.value })
    }
    render() {
        const { isLoading, content } = this.state;
        return (
            <div className="maniFormBox">
                <Spin spinning={isLoading}>
                    <Form
                        ref={this.formRef}
                        layout="vertical"
                        name="addArticle"
                        onFinish={this.onFinish}
                    >
                        <Form.Item
                            label="文章标题"
                            name="title"
                            rules={[{ required: true, message: '标题必填' }]}
                        >
                            <Input />
                        </Form.Item>

                        <div className="editArticleRow" style={{ display: 'flex' }}>
                            <Form.Item
                                label="markdown"
                                name="markdown"
                                rules={[{ required: true, message: '请输入内容' }]}
                                style={{ width: '48%' }}
                            >
                                <TextArea rows={25} onChange={this.onContentChange} />
                            </Form.Item>
                            <div className="EditArticlePreview" style={{ width: '50%', paddingLeft: '2%' }}>
                                <h4>文章预览</h4>
                                <div style={{ maxHeight: '560px', overflow: 'auto' }} >
                                    <ArticleDisplay content={content} loading={false} />
                                </div>
                            </div>
                        </div>

                        <Form.Item name="cateID" label="类别标签" rules={[{ required: true, message: "请选择标签" }]}>
                            <Select
                                placeholder="请选择标签"
                            >
                                {this.state.cates.map(cate => (
                                    <Option key={cate.cateID} value={cate.cateID}>{cate.cateName}</Option>
                                ))}
                            </Select>
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                新增
                        </Button>
                        </Form.Item>
                    </Form>
                </Spin>
            </div >
        )
    }
}